﻿<template>
  <div>
    <!-- <Steps :current="0">
        <Step title="" content="这里是该步骤的描述信息"></Step>
        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
    </Steps>-->
    <Table
      border
      ref="selection"
      :columns="columns"
      :data="shopcartlist"
      size="large"
      @on-select="selectOne"
      @on-select-cancel="cancelOne"
      @on-select-all="selectAll"
      @on-select-all-cancel="cancleAll"
      @on-selection-change="changeSelect"
      no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"
    >
      <template slot-scope="{ row }" slot="bookImg">
        <img :src="row.bookImg" alt width="100%" height="100%" />
        <!-- <pic-zoom :url="row.bookImg" :scale="3" :scroll="true"></pic-zoom> -->
      </template>
      <template slot-scope="{ row }" slot="bookname">
        <strong>{{ row.bookname }}</strong>
      </template>
      <template slot-scope="{ row }" slot="count">
        <InputNumber
          :max="100"
          :min="1"
          v-model="row.count"
          @on-change="selectChange($event,row.id,row.singleprice)"
        ></InputNumber>
        <!-- {{row}} -->
        <!-- <Computer></Computer> -->
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
        <Button type="error" size="small" @click="remove(row.id)">删除</Button>
      </template>
    </Table>
    <!-- <div>{{total}}</div> -->
    <div class="payContainer">
      <p class="total">合计：${{this.$store.state.total}}</p>
      <Button @click="payOrder" type="primary">去结算</Button>
      <!-- {{this.$store.state.cartlist}}
      {{userid}}-->
    </div>
  </div>
</template>

<script>
import PicZoom from "vue-piczoom";
import store from "@/vuex/store";
import { mapState, mapActions } from "vuex";
import Computer from "../Computer.vue";
export default {
  name: "MyShoppingCart",
  data() {
    return {
      // 该数组用于当点击选中某一项商品之后，把商品push进该数组，用于后续的提交表单以及价格计算等
      goodsCheckList: [],
      shopcartlist: [],
      selectcart: [],
      queryInfo: {
        query: window.sessionStorage.userid
      },
      userid: window.sessionStorage.userid,
      sumprice: "",
      total: 0,
      columns: [
        {
          title: "商品信息",
          align: "center",
          type: "selection",
          resizable: true,
          width: 70
        },
        {
          type: "index",
          resizable: true,
          width: 60,
          align: "center"
        },
        {
          title: "商品图",
          // sortable: true,
          align: "center",
          resizable: true,
          width: 170,
          slot: "bookImg"
        },
        {
          title: "图书名称",
          slot: "bookname",
          resizable: true,
          width: 260,
          align: "center"
        },
        {
          title: "单价(元)",
          sortable: true,
          align: "center",
          resizable: true,
          width: 100,
          key: "singleprice"
        },
        {
          title: "数量",
          sortable: true,
          slot: "count",
          align: "center",
          resizable: true,
          width: 250
          // key: "count"
        },
        {
          title: "金额(元)",
          key: "sumprice",
          sortable: true,
          align: "center",
          // 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，
          // 第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "red"
                }
              },
              "$" + params.row.sumprice
            );
          }
        },

        {
          title: "Action",
          slot: "action",
          // width: 300,
          resizable: true,
          align: "center"
        }
      ]
    };
  },
  methods: {
    // 获取购物车的信息
    async shopCartList() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/shopmall/shopcart",
        {
          params: this.queryInfo
        }
      );

      this.shopcartlist = res.data;
      console.log(this.shopcartlist);
    },
    // @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
    selectOne(selection, row) {
      var arr = [];
      console.log("选中一项");
      console.log(row.sumprice);
      console.log(selection);
      console.log(typeof selection)
      this.selectcart=selection
      console.log(row);
      // 绑定值被改变时触发
      this.$store.commit("addtotal", row.sumprice);
      let cart = [];
      // this.selectcart.push(JSON.stringify(row));
      console.log(this.selectcart);
      
      // var se = JSON.stringify(selection);
      // this.$store.commit("addcart", se);
      // console.log(typeof se);
      
      // console.log(arr)
    },
    cancelOne(selection, row) {
      console.log("取消一项");
      console.log(row.sumprice);
      this.$store.commit("subtotal", row.sumprice);
      var str = JSON.stringify(row);
      this.$store.commit("delcart", str);
    },
    // @on-select-all，点击全选时触发，返回值为 selection，已选项
    selectAll(selection) {
      // 全选的时候把数组中的sumprice遍历出来，逐个相加然后传给store
      console.log("选中所有");
      console.log(selection.length);
      var total = 0;
      for (var i = 0; i < selection.length; i++) {
        console.log(selection[i].sumprice);
        total = total + selection[i].sumprice;
      }
      //  console.log(total)
      this.$store.commit("cleartotal", total);
    },
    cancleAll() {
      console.log("取消所有选中");
      this.$store.commit("cleartotal", 0);
    },
    // @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项
    changeSelect(selection) {
      // console.log('选中项改变都触发')
    },
    // 修改购物车商品的数量
    async selectChange(event, id, sprice) {
      console.log(event, id, sprice);
      this.sumprice = event * sprice;
      console.log(this.sumprice);
      const { data: res } = await this.$axios.put("shopcart/edit/" + id, {
        sumprice: this.sumprice,
        count: event
      });
      this.shopCartList();
    },
    // 删除购物车
    async remove(id) {
      console.log(id);
      const confirmResult = await this.$confirm(
        "你确定要删除该商品吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$axios.delete("shopcart/delete/" + id);
      if (res.code !== 200) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.shopCartList();
    },
    payOrder() {
      this.$router.push ({ path: "/orderpay" ,
                         query:{params:this.selectcart}
                       });
    },
    show(index) {
      this.$Modal.info({
        title: "商品信息",
        // content: `Name：${this.shopCartList[index].bookname}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        content: `图书名：${this.shopcartlist[index].bookname}<br>
                数量：${this.shopcartlist[index].count}<br>
                单价：${this.shopcartlist[index].singleprice}<br>
                总价：${this.shopcartlist[index].sumprice}<br>
               `
      });
      // alert(index)
    }
  },
  components: {
    PicZoom,
    Computer
  },
  created() {
    this.shopCartList();
  },
  computed: {}
};
</script>

<style scoped>
.go-to {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
.ivu-table-column-iYPS1q {
  width: 160px !important;
}
.ivu-table-tbody .ivu-table-row .ivu-table-cell span {
  color: red !important;
}

.payContainer {
  margin-top: 25px;
  background-color: paleturquoise;
  display: flex;
  float: right;
}
.total {
  margin-right: 5px;
  font-size: 20px;
}
.ivu-modal-content {
  width: 1000px !important;
}
</style>
